<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>QQ聊天室</title>
	<script src="/js/sockjs-0.3.min.js" type="text/javascript"></script>
	<script src="/js/jquery-1.11.0.min.js" type="text/javascript"></script>
	<script type="text/javascript">
$(function() {
	var sock = new SockJS('/sockjs/chat');
	sock.onopen = function() {
		console.log('Open');
	};
	sock.onmessage = function(event) {
		var data = $.parseJSON(event.data);
		if (data.type == 'message') {
			var text = $('#dContent').html();
			$('#dContent').html(text + data.value + '<br>');
		} else if (data.type == 'users') {
			$('#dUsers').html(data.value);
		}
	};
	sock.onclose = function() {
		console.log('Close');
		sock = null;
	};
	
	//发送
	$('#btnSend').click(function() {
		var text = $('#txtMessage').val();
		if (text.length == 0) {
			alert('不能发送空内容');
			return;
		}
		if (sock == null) {
			sock = new SockJS('/sockjs/chat');
		}
		sock.send(text);
	});
});
	</script>
</head>
<body>
<table>
	<tr valign="top">
		<td style="width: 800px;">
			<div id="dContent" style="border: solid 1px green; width: 100%; height: 500px; overflow: scroll;"></div>
			<div style="margin-top: 10px;">
				<input id="txtMessage" type="text" style="border: solid 1px green; width: 70%; height: 20px;">
				<input id="btnSend" type="button" value="发送" style="width: 80px;">
			</div>
		</td>
		<td style="width: 125px;">
			<div id="dUsers" style="border: solid 1px green; width: 100%; height: 500px;"></div>
		</td>
	</tr>
</table>
	
</body>
</html>